import React from 'react';

import Row from 'antd/lib/row';
import Col from 'antd/lib/col';

import { URL_IMG } from '../config.jsx';

const styles = {
    channel: {
        width:"calc(100% / 3)", 
        float: "left", 
        textAlign:"center", 
        paddingTop: "1rem"
    },
    channelImg: {
        backgroundSize: "5rem 5rem",
        width:"5rem",
        height:"5rem",
        margin:"auto",
        borderRadius:"50%",
        marginBottom:"0.2rem"
    }
}

export default class Channels extends React.Component{

    copyTo(oldObj, newObj) {
        for (var key in newObj) {
            oldObj[key] = typeof newObj[key]==='object'? copyTo(newObj[key]): newObj[key];
        } 
        return oldObj; 
    }

    render(){
        if (this.props.channels === undefined || this.props.channels.length <= 0 ) {
            return <div>努力加载中......</div>
        } else {
            let stylesChannels = {};
            let stylesChannel = styles.channel;
            let stylesChannelImg = styles.channelImg;
            if (this.props.styles) {

                if (this.props.styles.channels) {

                    stylesChannels = this.copyTo(stylesChannels, this.props.styles.channels);
                }
                if (this.props.styles.channel) {

                    stylesChannel = this.copyTo(stylesChannel, this.props.styles.channel);
                }
                if (this.props.styles.channelImg) {

                    stylesChannelImg = this.copyTo(stylesChannelImg, this.props.styles.channelImg);
                }
            }

            var channels = [];
            var _this = this;
            let bashImg = URL_IMG.replace('/phenanthrene','');
            this.props.channels.map(function(channel){
                let backgroundImg = "url("+bashImg+channel.ChannelImageUrl+")";
                channels.push(
                    <div style={stylesChannel} key={channel.ID} onClick={() => {_this.props.handleSwitchChannel(channel.ID)}}>
                        <div style={{...stylesChannelImg, backgroundImage:backgroundImg}}>
                        </div>
                        { channel.Title }
                    </div>
                );
            });
            return(
                <div className="channels" style={stylesChannels}>
                    {channels}
                </div>
            );
        }
    }
}
